@charset "utf-8";
body {
	margin: 0;
	padding: 0;
	color: #FFF;
	background-image: url(../imagenes/fondo.png);
	font-family: Verdana, Arial, Helvetica, sans-serif;
	/* [disabled]font-size: 100%; */
	line-height: 1.5;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}

/* Selectores de elemento/etiqueta */
ul, ol, dl { 
	padding: 0;
	margin: 0;
}
/* Margen superior siempre cero */
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	
	padding-right: 15px;
	padding-left: 15px;
	color: #000;
}
/* este selector elimina el borde azul predeterminado que se muestra en algunos navegadores alrededor de una imagen cuando está rodeada por un vínculo */
a img { 
	border: none;
}

/* Los estilos de los vínculos del sitio debe permanecer en este orden */
a:link {
	color: #999999;
	text-decoration: none;
}
a:visited {
	color: #999999;
	text-decoration: underline;
}
a:hover, a:active, a:focus {
	text-decoration: none;
	color: #FFF;
}

/* Este contenedor rodea a todas las "div", su anchura esen porcentaje. EL Mínimo y el Máximo deben mantenerse.*/
.container {
	width: 90%;
	max-width: 1200px;
	min-width: 780px;
	background-color: #FFF;
	margin-top: 5px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

/* No se asigna anchura al encabezado. */
.header {
}

/* Tablas de contenido */
.sidebar1 {
	float: left;
	width: 329px;
	margin-left: 40px;
	margin-top: 10px;
	padding-bottom: 10px;
	background-image: url(../imagenes/recuadros.png);
}

.sidebar2 {
	float: right;
	width: 330px;
	margin-right:80px;
	margin-top: 10px;
	padding-bottom: 10px;
	background-image: url(../imagenes/recuadros.png);
}

.content {
	width: 80%;
	float: right;
	color: #000;
	padding-top: 10px;
	padding-right: 0;
	/* [disabled]padding-bottom: 10px; */
	padding-left: 0px;
	margin: 0px;
}
/* Selector para listas*/
.content ul, .content ol { 
	padding: 0 15px 15px 40px; 
}

/* Sección de menu izquierda */
ul.nav {
	list-style: none; /* esto elimina el marcador de lista */
	border-top: 1px solid #666; /* esto crea el borde superior de vínculos */
	margin-bottom: 10px; /* esto crea el espacio entre la navegación en el contenido situado debajo */
	width: 300px;
	margin-top: 15px;
	margin-left: 15px;
}

ul.nav li {
	border-bottom: 1px solid #666;
}

/* al agrupar estos selectores, se asegurará de que los vínculos mantengan el aspecto de botón incluso después de haber sido visitados */
ul.nav a, ul.nav a:visited { 
	padding: 5px 5px 5px 15px;
	display: block; /* Propiedades de bloque, lo que provoca que llene todo el LI que lo contiene para hacer que toda el área reaccione al clic de ratón. */
	text-decoration: none;
	color: #000;
	background-color: #FFF;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #600;
	border-right-color: #600;
	border-bottom-color: #600;
	border-left-color: #600;
}

/* Cambia el color de fondo y texto con ratón como con teclado */
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { 
	background-color: #6F7D94;
	color: #FFF;
	background-image: url(../imagenes/recuadros.png);
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #CCC;
	border-right-color: #CCC;
	border-bottom-color: #CCC;
	border-left-color: #CCC;
}

/* El pie de página */
.footer {
	padding: 10px 0;
	position: relative;/* esto da a IE6 hasLayout para borrar correctamente */
	clear: both; /* esta propiedad de borrado fuerza a .container a conocer dónde terminan las columnas y a contenerlas */
	background-image: url(../imagenes/recuadros.png);
	font-size: 80%;
}

/* Clases float/clear varias */

/* esta clase hace que un elemento flote en la parte derecha de la página. */
.fltrt {
	float: right;
	margin-left: 15px;
}

/* esta clase puede utilizarse para que un elemento flote en la parte izquierda de la página. El elemento flotante debe preceder al elemento junto al que debe aparecer en la página. */
.fltlft { 
	float: left;
	margin-right: 8px;
}

.clearfloat { /* esta clase puede situarse en una <br /> o div vacía como elemento final tras la última div flotante (dentro de #container) si #footer se elimina o se saca fuera de #container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/* Cajas opacas */
#scjmeunoavos {
	background-image: url(../imagenes/shadowbox001.png);
	position: fixed;
	z-index: 1;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
	visibility: hidden;
}
#scjenvosconfio {
	background-color: #DFDFDF;
	border: 10px double #FFF;
	position: absolute;
	left: -34px;
	top: -747px;
	width: 765px;
	height: 616px;
	z-index: 2;
}
#deigenetrix {
	background-image: url(../imagenes/shadowbox001.png);
	position: fixed;
	z-index: 1;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
	visibility: visible;
}
#orapronobis {
	background-color: #DFDFDF;
	border: 10px double #FFF;
	position: absolute;
	left: 102px;
	top: 20px;
	width: 765px;
	height: 616px;
	z-index: 2;
}

#figuras {
	padding: 10px;
	width: 35%;
	float: right;
}
#imagenes {
	padding: 10px;
	width: 40%;
	float: left;
}

#encabezado {
	padding: 20px,auto;
	padding-bottom:10px;
	width: 95%;
	float: center;
	margin: auto;
}

#imenu {
	padding: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	width: 300px;
	height: 10px;
	margin-left: 15px;
	}
#iomenu {
	padding: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	width: 300px;
	height: 10px;
	margin-left: 15px;
	float:right;
	}	
#info {
	background-color: rgba(102,102,102,0.9);
	width: 300px;
	height: 150px;
	opacity:0;
	-webkit-transition: opacity 2s;
	-moz-transition:opacity 2s;
	-ms-transition: opacity 2s;
	-o-transition: opacity 2s;
	transition: opacity 2s;
}

imenu:hover, #info{
	opacity: 1;
}


#wrapper{
	box-shadow: 0 0 0px rgba (0, 0, 0, 0.8);
	margin: auto;
	max-height:1300px;
	width: 100% !important;
}

section {
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment:fixed;
	height:400px;
	margin: auto;
	overflow:hidden;
	padding:0;
	position:relative;
	width:100% !important;
}

#bloque1 {
		background-image:url(../imagenes/008.png);
}
#bloque2 {
	background-image:url(../imagenes/bloque2.jpg);
}

.contento {
	width: 55%;
	float: left;
	padding-top: 10px;
	padding-left: 0px;
	margin: 0px;
}

/* Menu del Index*/
#headmenu{
	margin: 40px,auto;
	height: 260px;
	padding-left: 70px;
	
	/* [disabled]background-color: #FFF; */
	font-family: Helvetica Neue;
}

div.contenedor{
	margin:3px;
	width: 120px;
	height: 190px;
	float:left;
	border-top-left-radius:15px;
    -webkit-transition: height .4s;
}

div#uno{
	background-image: url(../imagenes/recuadros.png);
}

div#dos{
	background-image: url(../imagenes/recuadros.png);
}

div#tres{
	background-image: url(../imagenes/recuadros.png);
}

div#cuatro{
	background-image: url(../imagenes/recuadros.png);
}

div#cinco{
	background-image: url(../imagenes/recuadros.png);
}

div#seis{
	background-image: url(../imagenes/recuadros.png);
}

div#siete{
	background-image: url(../imagenes/recuadros.png);
}

div#ocho{
	background-image: url(../imagenes/recuadros.png);
}
img.icon{
	display: block;
	margin:20px auto;
	background-color: rgba(255,255,255,.15);
	width:70px;
	padding:5px;
	-webkit-border-radius: 50%;
	-webkit-box-shadow: 0px 0px 0px 30px rgba(255,255,255,0);
	-webkit-transition:box-shadow .4s;
}

p.texto{
	font-size: 1.2em;
	color:white;
	text-decoration:none;
	text-align: center;
	padding-top:2px;
	opacity: .6;
	-webkit-transition: padding-top .4s;
}

div.contenedor:hover{
	height:230px;
	border-bottom-right-radius:35px
}

div.contenedor:hover p.texto{
	padding-top: 30px;
	text-decoration:underline;
	letter-spacing:1px;
	opacity: 1;
}

div.contenedor:hover img.icon{
	-webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,.6);
}

/* Cambiar las propiedades de texto*/
p.blanco{
	font-size: 0.8em;
	color:white;
}
.blanco{
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 1.8em;
	color:#666;
}
.gris{
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 2.5em;
	color:#333;
}